<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Swiper-3.3.1/dist/js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="js/Swiper-3.3.1/dist/css/swiper.css"/>
		
		<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="js/font-awesome-4.6.3/css/font-awesome.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/webjs.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@media all and (min-width: 100px) and (max-width: 640px) {
				.header{
					background: #FFF;
    				padding: 0 0 .1rem;
    				
				}
				.header .search-bar{
					display: flex;
					width: 100%;
					height: 2rem;
				}
				.header i{
					width: 5%;
					float: left;
					text-align: center;
					line-height: 2rem;
					height: 2rem;
					font-size: 1.2rem;
					color: #999;
				}
				.header span{
					width: 95%;
					float: left;
					height: 2rem;
					line-height: 2rem;
				}
				.header input{
					width: 100%;
					height: 1.5rem;	
					line-height: 1.5rem;
					border: none;
					color: #333;
					font-size: 1.2rem;				
				}
				.search-bottom{
					height: 5px;
					width: 95%;
					border: 1px solid #ccc;
					border-top: none;
					margin: 0 auto;
				}
				#sider{
					width: 100%;
				    background-color: #fff;
				    overflow: hidden;
				   	display: flex;
				    
				}
				#sider img{	
					width: 100%;
				}
				.section{
					
				}
				.section .wrapper{
					background: #F5F5F5;
    				padding: .1rem 0;
				}
				.section .wrapper .imgs{
					display: flex;
					width: 100%;
				}
				.imgs>div{
					float: left;
					width: 30%;
					margin:0 1.25% ;
				}
				.imgs>div img{
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="search-bar">
				<i class="fa fa-search"></i>
				<span>
					<input type="text" name="serch-btn" id="serch-btn" value="" placeholder="搜素商品名称" />
				</span>
			</div>
			<div class="search-bottom"></div>
		</div>
		<div id="sider" class="sider">
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide">
			        	<img src="img/banner1.jpg"/>
			        </div>
			        <div class="swiper-slide">
			        	<img src="img/banner2.jpg"/>
			        </div>
			        <div class="swiper-slide">
			        	<img src="img/banner3.jpg"/>
			        </div>
			        <div class="swiper-slide">
			        	<img src="img/banner4.jpg"/>
			        </div>
			    </div>
			    <!-- 如果需要分页器 -->
			    <div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="section">
			<div class="wraper">
				<div class="imgs">
				<div><img src="img/list1.jpg"/></div>
				<div><img src="img/list2.jpg"/></div>
				<div><img src="img/list3.jpg"/></div>
				<div><img src="img/list4.jpg"/></div>
				<div><img src="img/list5.jpg"/></div>
				<div><img src="img/list6.jpg"/></div>
				<div><img src="img/list6.png"/></div>
				<div><img src="img/list8.png"/></div>
				<div><img src="img/list9.png"/></div>
				</div>
			</div>
			
		</div>
	</body>
</html>
